import React, {memo, useCallback} from 'react';
import {
  View,
  Text,
  StyleSheet,
  NativeModules,
  TouchableHighlight,
  Dimensions,
  TouchableWithoutFeedback,
} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';
import PatIcon from '../base/PatIcon';
import {useNavigation} from '@react-navigation/native';
import Colors from '../../utils/Colors';
import {useTranslation} from 'react-i18next';
const HEIGHT = NativeModules.StatusBarManager.HEIGHT;
const windowWidth = Dimensions.get('window').width;

const SignIn = ({onOpen}) => {
  const onClick = useCallback(() => {
    console.log(1232);
    onOpen();
  }, [onOpen]);
  return (
    <View style={styles.signIn}>
      <TouchableWithoutFeedback onPress={onClick}>
        <View style={styles.signInLeft}>
          <View>
            <Text style={styles.signInTextTop}>签到</Text>
            <Text style={styles.signInTextbottom}>领取您的20积分</Text>
          </View>
          <View>
            <PatIcon name="signed" size={20} color={'#f30'} />
          </View>
        </View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback onPress={onClick}>
        <View style={styles.signInRight}>
          <View>
            <Text style={styles.signInTextTop}>分享</Text>
            <Text style={styles.signInTextbottom}>最高可获得%100积分</Text>
          </View>
          <View>
            <PatIcon name="signed" size={20} color={'#f30'} />
          </View>
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
};

const styles = StyleSheet.create({
  signIn: {
    marginBottom: 20,
    // backgroundColor: '#f40',
    marginLeft: 20,
    marginRight: 20,
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
  },
  signInLeft: {
    height: 60,
    backgroundColor: 'rgba(240,245,217,0.3)',
    borderWidth: 0.3,
    borderColor: Colors.patFontGray,
    flex: 1,
    borderRadius: 10,
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    paddingRight: 10,
    paddingLeft: 10,
  },
  signInRight: {
    height: 60,
    backgroundColor: 'rgba(145,186,221,0.2)',
    borderRadius: 10,
    borderWidth: 0.3,
    borderColor: Colors.patFontGray,
    flex: 1,
    marginLeft: 10,
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingRight: 10,
    paddingLeft: 10,
    flexDirection: 'row',
  },
  signInTextTop: {
    color: Colors.patFontGray,
    fontSize: 14,
  },
  signInTextbottom: {
    color: Colors.patFontRed,
    fontSize: 10,
  },
});

export default SignIn;
